<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="供应商">
        <el-input v-model="supplierComponent.supplierName" disabled/>
      </el-form-item>

      <el-form-item label="零件">
        <el-input v-model="supplierComponent.componentName" disabled/>
      </el-form-item>


      <el-form-item label="价格">
        <el-input v-model="supplierComponent.price" />
      </el-form-item>



      <el-form-item>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          @click="updateSupplierComponent">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import supplierComponent from "@/api/supplierComponent/supplierComponent";
  import ImageCropper from "@/components/ImageCropper";
  import PanThumb from "@/components/PanThumb";
  export default {
    components: { ImageCropper, PanThumb },
    data() {
      return {
        supplierComponent: null,
        saveBtnDisabled: false // 保存按钮是否禁用,
      };
    },
    created() {
      // 在页面渲染之前执行
      this.getsupplierComponent();
      console.log("页面渲染之前",this.supplierComponent)
    },
    methods: {

      // 修改
      updateSupplierComponent() {
        console.log("111111111111",this.supplierComponent)
        supplierComponent.updateSupplierComponent(this.supplierComponent).then(response => {
          this.$message({
            // 提示信息
            type: "success",
            message: "修改成功!"
          });
          // 修改成功之后跳转到列表页面
          this.$router.push({ path: "/supplierComponent/list" });
        });
      },
      // 根据id查询供应商供应零件信息
      getsupplierComponent() {
        supplierComponent.getSupplierComponentrById(this.$route.params.id).then(response => {
          this.supplierComponent = response.data;
        });
      }
    }
  };
</script>
